import {createContext, useContext} from "react";


const LevelContext = createContext(0);
export function Section({children}) {

  const level = useContext(LevelContext)
  return (
    /*<section>标签 是 JSX 语法，最终会被编译成 HTML 标签 表示页面中的一个“区域”或“章节” */
    <section className="section">
      {/*这是 React Context 的核心机制之一，用来“提供”数据给所有后代组件*/}
      {/*提供 Context 数据 跨组件共享状态，避免层层传 props*/}
      <LevelContext.Provider value={level + 1}>
        {children}
      </LevelContext.Provider>
    </section>
  )
}

export function Header ({children}) {

  const level = useContext(LevelContext)
  switch (level) {
    case 1:
      return (<h1>{children}</h1>)
    case 2:
      return (<h2>{children}</h2>)
    case 3:
      return (<h3>{children}</h3>)
    case 4:
      return (<h4>{children}</h4>)
    case 5:
      return (<h5>{children}</h5>)
    case 6:
      return (<h6>{children}</h6>)
    default:
      throw Error(`Unknown level: ${level}`)
  }
}